<template>
	<view class="voice-mask">
		<view class="voice-handle-operation-area">
			<view class="operation-area-main">
				<view class="cancel-voice-button" @touchend="cancelTouchEnd" id="cancelButton"
					:class="{'cancel-button-hl':isOnCancelButton}"  @click.stop="endRecords">
					<u-icon name="close" color="#949494" size="50"></u-icon>
				</view>
				<view class="operation-tips">
					{{isOnCancelButton?'松开 取消':'上滑取消录音'}}
				</view>
			</view>
			<view class="operation-area-play-button" id="playButton" :class="{'play-button-hl':isOnPlayButton}">
				<image src="/static/image/chat/voice-icon.png" class="voice-icon">
			</view>
		</view>
		<view class="voice-message-container" :class="isOnCancelButton?'cancel':'normal'">
			<image src="/static/image/chat/audio.gif" class="audio"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			touchCoordinates: {
				type: Object,
				required: {
					X: 0,
					Y: 0,
				}
			}
		},
		data() {
			return {
				cancelButtonCoordinates: {
					X: [],
					Y: [],
				},
				playButtonCoordinates: {
					X: [],
					Y: [],
				},
				isOnCancelButton: false,
				isOnPlayButton: true,
			}
		},
		watch: {
			// touchCoordinates: {
			// 	handler(val) {
			// 		console.log(val)
			// 		this.$nextTick(() => {
			// 			console.log(val)
			// 			console.log(this.playButtonCoordinates)
			// 			if (val.X >= this.cancelButtonCoordinates.X[0] && val.X <= this
			// 				.cancelButtonCoordinates.X[
			// 					1] && val
			// 				.Y >= this.cancelButtonCoordinates.Y[0] && val.Y <= this
			// 				.cancelButtonCoordinates.Y[1]
			// 			) {
			// 				console.log('进入按钮范围')
			// 				if (!this.isOnCancelButton) {
			// 					console.log('第一次或者再一次进入取消按钮，发送事件')
			// 				}
			// 				this.isOnCancelButton = true;
			// 				this.isOnPlayButton = false;
			// 			} else if (val.X >= this.playButtonCoordinates.X[0] && val.X <= this
			// 				.playButtonCoordinates
			// 				.X[1] && val
			// 				.Y >= this.playButtonCoordinates.Y[0] && val.Y <= this
			// 				.playButtonCoordinates.Y[1]) {
			// 				console.log('进入播放按钮区域')
			// 				if (!this.isOnPlayButton) {
			// 					console.log('第一次或者再一次进入播放按钮，发送事件')
			// 				}
			// 				this.isOnCancelButton = false;
			// 				this.isOnPlayButton = true;
			// 			} else {
			// 				if (this.isOnPlayButton || this.isOnCancelButton) {
			// 					console.log('既不在播放按钮也不在取消按钮区域上，暂停录音也不准备取消录音')
			// 				}
			// 				this.isOnCancelButton = false;
			// 				this.isOnPlayButton = false;

			// 			}
			// 		})



			// 	},
			// 	deep: true,
			// 	immediate: true,
			// }
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#cancelButton').boundingClientRect(data => {
				this.cancelButtonCoordinates.X = [data.left, data.left + data.width];
				this.cancelButtonCoordinates.Y = [data.top, data.top + data.height];
			})
			query.select('#playButton').boundingClientRect(data => {
				this.playButtonCoordinates.X = [data.left, data.left + data.width];
				this.playButtonCoordinates.Y = [data.top, data.top + data.height];
				console.log(this.playButtonCoordinates)
				this.startWatch();
			})

			query.exec();
		},
		methods: {
			endRecords() {
				console.log("1")
				this.$emit('endRecords')
			},
			cancelTouchStart() {
				console.log('是否取消录音')
			},
			cancelTouchEnd() {
				console.log('取消录音')
			},
			startWatch() {
				this.$watch('touchCoordinates', (val, oldVal) => {
					this.$nextTick(() => {
						if (val.X >= this.cancelButtonCoordinates.X[0] && val.X <= this
							.cancelButtonCoordinates.X[
								1] && val
							.Y >= this.cancelButtonCoordinates.Y[0] && val.Y <= this
							.cancelButtonCoordinates.Y[1]
						) {


							if (!this.isOnCancelButton) {
								// console.log('第一次或者再一次进入取消按钮，发送事件')
								uni.vibrateShort();
								this.$emit('onCancelButton', true)
							}
							this.isOnCancelButton = true;
							this.isOnPlayButton = false;


						} else if (val.X >= this.playButtonCoordinates.X[0] && val.X <= this
							.playButtonCoordinates
							.X[1] && val
							.Y >= this.playButtonCoordinates.Y[0] && val.Y <= this
							.playButtonCoordinates.Y[1]) {


							if (!this.isOnPlayButton) {
								// console.log('再一次进入播放按钮，发送事件')
								uni.vibrateShort();
								// this.$emit('onCancelButton', false);
							}
							this.isOnCancelButton = false;
							this.isOnPlayButton = true;


						} else {


							if (this.isOnPlayButton || this.isOnCancelButton) {
								// console.log('既不在播放按钮也不在取消按钮区域上，暂停录音也不准备取消录音')
								this.$emit('onCancelButton', false);
							}
							this.isOnCancelButton = false;
							this.isOnPlayButton = false;


						}
					})
				}, {
					immediate: true,
					deep: true,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./voiceMask.scss";
</style>
